<style lang="less" scoped>
@import "./shopinfo.less";
</style>
<template :options="options">
  <div class="d-config">
    <el-tabs value="content" class="d-tab">
      <el-tab-pane label="内容" name="content">
        <div class="pannelcontent">
          <div class="pannelItem">
            <div class="tit">选择商品</div>
            <el-radio-group v-model="choose">
              <el-radio label="noauto">
                <span>手动选择</span>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="pannelItem">
            <div class="tit">显示内容</div>
            <el-checkbox-group v-model="goods" @on-change="changeContent">
              <el-checkbox label="goods_title">
                <span>商品名称</span>
              </el-checkbox>
              <el-checkbox label="goods_price">
                <span>商品价格</span>
              </el-checkbox>
              <el-checkbox label="origin_price">
                <span>划线原价</span>
              </el-checkbox>
              <el-checkbox label="goods_sale">
                <span>商品销量</span>
              </el-checkbox>
              <el-checkbox label="goods_subtitle">
                <span>副标题</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="pannelItem">
            <div class="tit">购物车按钮</div>
            <el-radio-group v-model="cart" @on-change="changeCart">
              <el-radio label="cart_show">
                <span>显示</span>
              </el-radio>
              <el-radio label="cart_hide">
                <span>隐藏</span>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="pannelItem">
            <div class="tit">角标设置</div>
            <el-radio-group v-model="corset" @on-change="changeCore">
              <el-radio label="cor_hide">
                <span>不显示</span>
              </el-radio>
              <el-radio label="cor_system">
                <span>系统图标</span>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: ["options"],
  data() {
    return {
      choose: "noauto",
      goods: ["goods_title", "goods_price", "goods_subtitle"],
      cart: "cart_show",
      corset: "cor_hide",
      newOptions: {}
    };
  },
  created() {
    let _this = this;
    _this.init(_this.options);
  },
  watch: {
    options() {
      let _this = this;
      _this.newOptions = _this.options;
      _this.init(_this.newOptions);
    }
  },
  methods: {
    // 初始化
    init(op) {
      let _this = this;
      let optionsParams = op.options;
      if (JSON.stringify(optionsParams) == "{}") {
        _this.restore();
      } else {
        _this.choose = optionsParams.choose;
        _this.goods = optionsParams.goods;
        _this.cart = optionsParams.cart;
        _this.corset = optionsParams.corset;
      }
    },
    // 恢复初始状态
    restore() {
      let _this = this;
      _this.choose = "noauto";
      _this.goods = ["goods_title", "goods_price", "goods_subtitle"];
      _this.cart = "cart_show";
      _this.corset = "cor_hide";
      _this.changeForm();
    },
    // 改变购物车按钮
    changeCart(value) {
      let _this = this;
      _this.cart = value;
      _this.changeForm();
    },
    // 显示内容
    changeContent(value) {
      let _this = this;
      _this.goods = value;
      _this.changeForm();
    },
    // 角标显示
    changeCore(value) {
      let _this = this;
      _this.corset = value;
      _this.changeForm();
    },
    //改变值并且给父组件传递事件
    changeForm() {
      let _this = this;
      let changeData = {
        choose: _this.choose,
        goods: _this.goods,
        cart: _this.cart,
        corset: _this.corset
      };
      _this.$emit("listenToForm", changeData);
    }
  }
};
</script>
